<template>
    <div class="choosebank">
      <div class="list_item flex p_l30 p_r30 p_t20 border_b bg_colorff" v-for="(list, index) in cordlist" :key="index" @click="chooseFn(list.id,list.name,list.card_number)">
        <div class="flex-1">
          <div class="flex">
            <img class="bank_icon" src="../../assets/img/bankicon.png"/>
            <div class="font_size32 color_33 m_l20">{{list.name}}</div>
          </div>
          <div class="font_size24 color_99 m_l" ><span>{{list.real_name}}</span><span class="m_l20">{{list.card_number}}</span></div>
        </div>
        <div class="t_right m_t20"  v-if="list.checkstatus == 1"><img class="gougou_icon" src="../../assets/img/icon/gougou.png" /></div>
      </div>
      <div class="p_l30 p_r30"><div class="zhifu_btn" @click="btnFn">确定</div></div>
    </div>
</template>

<script>
    export default {
        name: "choosebank",
      data(){
        return{
          isgougou: false,
          cordlist: [],
          cardid: '',
          cardnum: '',
          cardname: ''
        }
      },
      created(){
          this.getlist()
      },
      methods: {
        getlist(){
          this.$util.get('user/getUserBankCardList',{
            uid: this.$store.state.userinfo.uid
          }).then(data => {
            if(data.status == 1){
              data.data.forEach(item => {
                item.checkstatus = 0
              })
              this.cordlist = data.data
            }
          })
        },
        chooseFn(id,name,cardnum){
          this.cardid = id
          this.cardname = name
          this.cardnum = cardnum
          this.cordlist.filter(item => {
            return item.id == id? item.checkstatus = 1: item.checkstatus =0
          })
        },

        btnFn(){
          if(this.cardid){
            var num = this.cardnum.substring(this.cardnum.length-4)
            var info = {
              id: this.cardid,
              nameinfo:  this.cardname+'('+num+')'
            }
            this.$store.commit('setchoosebankinfo',info)
            this.$router.back()
          } else {
            this.$toast('请选择银行卡')
          }
        }

      }

    }
</script>

<style scoped>
  .list_item{
    height: 130px;
  }
  .bank_icon{
    width: 50px;
    height: 50px
  }
  .m_l{
    margin-left: 70px;
  }
  .gougou_icon{
    height: 27px;
    width: 38px;
  }
  .zhifu_btn{
    width: 100%;
    height: 70px;
    line-height: 70px;
    background-color: #0dd13b;
    color: white;
    border-radius: 30px;
    margin-top: 70px;
    text-align: center;
    font-size: 28px;
  }
</style>
